// 导入 normalize.less
@import url(./normalize.less);
// 导入 base.less
@import url(./base.less);
// 写index页面的css
// 定义根字号
@rootSize: 37.5rem;

body {
  background-color: #f0f0f0;

}

// 主体区域
.main {
  padding-bottom:  (55 / @rootSize);
}
.banner {
  height: (160 / @rootSize);
  background-color: pink;
  img {
    height: 100%;
  }
}

// 活动标题

.title {
  height: (40 / @rootSize);
  line-height: (40 / @rootSize);
  h4 {
    font-size: (14 / @rootSize);
    color: #3C3C3C;
    padding-left: (15 / @rootSize);
  }
}

// 活动选项模块
.item {
  background-color: #fff;
  .pic {
    position: relative;
    .collect {
      position: absolute;
      top: (18 / @rootSize);
      right:  (18 / @rootSize);
      i {
        font-size: (24 / @rootSize);
        color: #f8ca43;
      }
    }
    .status {
      position: absolute;
      top: (-4 / @rootSize);
      left: (15 / @rootSize);
      width: (68 / @rootSize);
      height: (29 / @rootSize);
      background-color: pink;
      font-size: (12 / @rootSize);
      text-align: center;
      line-height:  (24 / @rootSize);
      color: #fff;
      background: url(../images/status_active.png) no-repeat;
      background-size: 100%;
    }
  }

  // info
  .info {
    position: relative;
    padding: (10 / @rootSize) (65 / @rootSize) (10 / @rootSize) (15 / @rootSize);
    h5 {
      font-size: (15 / @rootSize);
      font-weight: 400;
      line-height: (21 / @rootSize);
    }
    .rest {
      display: flex;
      margin-top: (15 / @rootSize);
      p {
        font-size: (11 / @rootSize);
        color: #B4B4B4;
        &:nth-child(1) {
          margin-right: (10 / @rootSize);
        }
        i {
          font-size: (11 / @rootSize);
        }
      }
    }

    .type {
      position: absolute;
      top: (12 / @rootSize);
      right: (15 / @rootSize);
      color: red;
      font-size: (15 / @rootSize);
    }
  }
}
// 底部固定工具栏
.toolbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: (49 / @rootSize);
  background-color: #FECA49;
  display: flex;
  justify-content: space-around;
  a {
    font-size: (11 / @rootSize);
    color: #D78B09;
    display: flex;
    // 转换主轴
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i {
      font-size: (22 / @rootSize);
    }
  }
  // 变白色
 .active {
   color: #fff;
 } 

}

